<template>
  <div class="page-main">
    <el-row :gutter="30">
      <el-col :span="24">
        <charts-col ></charts-col>
      </el-col>
    </el-row>



    <el-row :gutter="30">
      <span class="title-span"
      >2023-01至2023-02日间手术分级统计</span
      >
      <el-divider/>
      <el-col :span="24">
        <el-table :data="tableData"  :summary-method="getSummaries"
                  show-summary style="width: 100%">
          <el-table-column prop="date" label=""/>
          <el-table-column prop="value_1" label="一级手术完成量(占比)">
            <template #default="scope">
              <span>{{ scope.row.value_1 }}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="value_2" label="二级手术完成量(占比)">
            <template #default="scope">
              <span>{{ scope.row.value_2 }}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="value_3" label="三级手术完成量(占比)">
            <template #default="scope">
              <span>{{ scope.row.value_3 }}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="value_4" label="四级手术完成量(占比)">
            <template #default="scope">
              <span>{{ scope.row.value_4 }}%</span>
            </template>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="all">
import chartsCol from '/@/components/charts/col.vue';
const tableData = ref([
  {
    date: '2023-01-31',
    value_1: 120,
    value_2: 132,
    value_3: 10,
    value_4: 10

  }
]);

// 随机生成10个对象并添加到tableData数组中
for (let i = 0; i < 10; i++) {
  const date = getRandomDate();
  const value_1 = getRandomValue();
  const value_2 = getRandomValue();
  const value_3 = getRandomValue();
  const value_4 = getRandomValue();
  tableData.value.push({ date, value_1, value_2, value_3, value_4 });
}

// 生成随机日期字符串
function getRandomDate() {
  const year = 2023;
  const month = getRandomInt(1, 12);
  const day = getRandomInt(1, 28);
  return `${year}-${padZero(month)}-${padZero(day)}`;
}

// 生成随机数值
function getRandomValue() {
  return getRandomInt(0, 100);
}

// 生成指定范围内的随机整数
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

// 将数字转换为两位数的字符串，不足两位时在前面补0
function padZero(num) {
  return num.toString().padStart(2, '0');
}

const getSummaries = (param) => {
  const {columns, data} = param
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '区间统计'
      return
    }
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = ` ${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}%`
    } else {
      sums[index] = 'N/A'
    }
  })

  return sums
}
</script>
